<template>
    <div class="searchBar">

        <el-button type="success" @click="onAddType">新增</el-button>
    </div>
    <div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
            max-height="250">
            <el-table-column prop="typeName" label="类别" />
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="onUpdateType(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click.prevent="onDeleteType(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper"
            :total="tableData.length" v-if="(tableData.length != 0)">
        </el-pagination>
    </div>
    <addType :addTypeShow="addTypeShow" @closeAddType="closeAddType" :type="types"/>

    <updateType :updateTypeShow="updateTypeShow" @closeUpdateType="closeUpdateType" :type="types" :typeInfo="updateTypeValue" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { getShopAllTypes,deleteType } from '@/api/type'
import addType from './components/addType.vue'
import updateType from './components/updateType.vue'


const tableData: any = ref([])

//获取角色
let types: any = ref([]);

const getTypes =async () => {
    types.value = (await getShopAllTypes()).data.types
    tableData.value= types.value
    console.log("types", types)
}

onMounted(async () => {
    getTypes()
})


//分页
const pagesize = ref(4)//每页多少个
const handleSizeChange = (size: any) => {
    // console.log(size);     
    pagesize.value = size;
    // console.log(pagesize.value); //每页下拉显示数据
}

const currentPage = ref(1)//默认第几页
const handleCurrentChange = (current: any) => {
    // console.log(current); 
    currentPage.value = current
    // console.log(currentPage.value); //点击第几页
}


const addTypeShow = ref(false)

const updateTypeShow = ref(false)


const updateTypeValue = ref()


const onAddType = () => {
    addTypeShow.value = true
}


const onUpdateType = (typeInfo: any) => {
    updateTypeValue.value = typeInfo
    updateTypeShow.value = true
}

const onDeleteType = async (typeInfo: any) => {
    ElMessageBox.confirm(
        '确定要删除' + typeInfo.typeName + '这个类别?',
        '警告',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
            const deleteTypeResult: any = await deleteType(typeInfo.id)
            console.log("deleteTypeResult", deleteTypeResult)
            if (deleteTypeResult.success) {
                ElMessage({
                    type: 'info',
                    message: deleteTypeResult.info.msg
                })
                getTypes()
            } else {
                ElMessage({
                    type: 'warning',
                    message: deleteTypeResult.info.msg
                })
            }
            loading.close()
        } catch (error) {
            console.log(error)
            loading.close()
        }
    }).catch((error) => {
        console.log( error)
    })
}


const closeAddType = (value: boolean) => {
    addTypeShow.value = false;
    getTypes()
}

const closeUpdateType = (value: boolean) => {
    updateTypeShow.value = false;
    getTypes()
}



</script>

<style scoped>
.searchBar {
    margin-top: 20px;
    margin-bottom: 20px;
}

.demo-pagination-block {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>